<template>
    <div class="item" @click="fn">
        <template v-if="!flag">
            <slot name="normalImg"></slot>
        </template>
        <template v-if="flag">
            <slot name="activeImg"></slot>
        </template>
        <br>
        <span :class="{active:flag}">{{txt}}</span>
    </div>
</template>

<script>
export default {
    // mark 表示当前item的名称,curr,表示选中的菜单名称
    props:["txt","mark","curr"],
    computed:{
        flag(){
            if(this.mark==this.curr){
                return true;
            }
            return false;
        }
    },
    methods:{
        fn(){
            console.log("点击菜单",this.mark);
            this.$emit("change",this.mark)
        }
    }

}
</script>

<style>
    .active{
        color: red;
    }
</style>